<template>
  <div class="app-page">
    <el-table-form ref="form" :model="query">
      <el-form-item :table-form-merge="2" class="merge-item">
        <el-select
          v-model="dateType"
          style="width: 170px; margin-right: 2px;"
        >
          <el-option label="创建时间" value="createTime" />
          <el-option label="审核时间" value="auditDt" />
          <el-option label="期望时间" value="expectDt" />
        </el-select>
        <el-date-picker
          v-model="date"
          type="datetimerange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>

      <el-form-item label="仓库(出):">
        <el-select
          v-model="query.outStoreId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in leftStoreMap"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item :table-form-merge="0.3">
        <el-button
          circle
          type="primary"
          @click="exchange"
        ><svg-icon
          class="map"
          icon-class="exchange"
        /></el-button>
      </el-form-item>

      <el-form-item label="仓库(入):">
        <el-select
          v-model="query.inStoreId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in rightStoreMap"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="merge-item">
        <el-select v-model="qtype" style="width: 170px; margin-right: 2px;">
          <el-option value="applicant" label="创建人" />
          <el-option value="checkUser" label="审核人" />
        </el-select>
        <el-input v-model.trim="txt" placeholder="请输入" clearable @keyup.enter.native="search" />
      </el-form-item>
      <el-form-item class="merge-item">
        <el-select v-model="qtype1" style="width: 170px; margin-right: 2px;">
          <el-option value="stockTransCode" label="调拨单号" />
          <el-option value="reBillCode" label="计划单号" />
          <el-option value="stockOutBillCode" label="出库单号" />
          <el-option value="stockInBillCode" label="入库单号" />
        </el-select>
        <el-input v-model.trim="txt1" placeholder="请输入" clearable @keyup.enter.native="search" />
      </el-form-item>

      <el-form-item label="调拨单状态:" prop="transStatus">
        <el-select
          v-model="query.transStatus"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in transStatusMap"
            :key="item.key"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="调拨扫瓶:" prop="isSweep">
        <el-select
          v-model="query.isSweep"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in isSweepMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出入库数量:" prop="scanErrFlag">
        <el-select
          v-model="query.scanErrFlag"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in scanErrFlagMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="所属机构:" prop="orgSNNo">
        <el-tree-select
          v-model="query.orgSNNo"
          clearable
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
          }"
          :tree-params=" {
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
        />
      </el-form-item> -->
      <template v-slot:btns>
        <el-button
          v-permission="[70302,1]"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="[70302,2]" type="primary" icon="el-icon-plus" @click="transferEditDialog">调拨</el-button>
        <el-button v-permission="[70302,6]" type="primary" icon="el-icon-download" @click="exportFile">导出</el-button>
        <el-button v-permission="[70302,7]" type="primary" @click="bacth">批量审核</el-button>
      </div>
    </div>

    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
      @selection-change="selectTable"
    />
    <edit-info
      ref="editInfo"
      :truck-map="truckMap"
      :driver-map="driverMap"
      :escort-map="escortMap"
      @upDdataTable="upDataTable"
    />
    <allot
      ref="allot"
      :store-map="storeMap"
      :truck-map="truckMap"
      :driver-map="driverMap"
      :escort-map="escortMap"
      :trans-type-map="transTypeMap"
      @upDdataTable="upDataTable"
    />
    <stockTransDetail
      ref="stockTransDetail"
      :store-map="storeMap"
      :truck-map="truckMap"
      :driver-map="driverMap"
      :escort-map="escortMap"
      :trans-type-map="transTypeMap"
      :trans-status-map="transStatusMap"
      :stock-out-type-map="stockOutTypeMap"
      :stock-in-type-map="stockInTypeMap"
      :gd-status-map="gdStatusMap"
      @upDdataTable="upDataTable"
    />
    <bacth
      ref="bacth"
      :truck-map="truckMap"
      :driver-map="driverMap"
      :escort-map="escortMap"
      @upDdataTable="upDataTable"
    />
    <outStorageDetail ref="outStorageDetail" :stock-out-type-map="stockOutTypeMap" :gd-status-map="gdStatusMap" />
    <putStorageDetail ref="putStorageDetail" :stock-in-type-map="stockInTypeMap" :gd-status-map="gdStatusMap" />
    <allotPlanDetail ref="allotPlanDetail" :status-map="statusMap" :truck-list="truckMap" :driver-list="driverMap" :escort-list="escortMap" />
  </div>
</template>

<script>
  import {
    selectStockTransBill,
    queryTruckNoList, // 车辆
    queryDriverList, // 司机
    queryEscortList, // 押运员
    selectOrgSNNoAndReType,
    selectOrgSNNo,
    stockTransCancel,
    stockTransExport,
    queryExportDomain,
    queryMap,
    stockTransWin
  } from '@/api'
  import dayjs from 'dayjs'
  import { mapGetters } from 'vuex'
  import getTreeData from '@/utils/jsonTree'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { formatColumnMap, parseTime } from '@/utils'
  import EditInfo from './components/EditInfo.vue'
  import Allot from './components/Allot.vue'
  import stockTransDetail from './components/stockTransDetail.vue'
  import bacth from './components/bacth.vue'
  import putStorageDetail from '../components/putStorageDetail.vue'
  import outStorageDetail from '../components/outStorageDetail.vue'
  import allotPlanDetail from '../allotPlan/components/allotPlanDetail.vue'
  export default {
    name: 'transferManage',
    components: {
      EditInfo,
      Allot,
      stockTransDetail,
      bacth,
      outStorageDetail,
      putStorageDetail,
      allotPlanDetail
    },
    data() {
      return {
        dateType: 'createTime',
        date: [dayjs(new Date()).format('YYYY-MM-DD') + ' 00:00:00', dayjs(new Date()).format('YYYY-MM-DD') + ' 23:59:59'],
        qtype: 'applicant',
        txt: '',
        qtype1: 'stockTransCode',
        txt1: '',
        scanErrFlagMap: [{ desc: '一致', value: -1 }, { desc: '不一致', value: 1 }],
        query: {
          inStoreId: '',
          outStoreId: '',
          stockTransCode: '',
          transStatus: '',
          scanErrFlag: ''
        },
        storeMap: [],
        leftStoreMap: [],
        rightStoreMap: [],
        isSweepMap: [{ desc: '否', value: 1 }, { desc: '是', value: 2 }],
        transTypeMap: [{ desc: '内部充装调拨', value: 2 }, { desc: '内部调拨', value: 3 }],
        truckMap: [], // 车辆
        driverMap: [], // 所有司机
        escortMap: [], // 押运员
        stockOutTypeMap: [], // 出库类型
        stockInTypeMap: [], // 入库类型
        gdStatusMap: [], // 商品状态枚举
        transStatusMap: [
          { value: -1, desc: '已作废', key: 'INVALID' },
          { value: 1, desc: '待审核', key: 'UNREVIEWED' },
          { value: 2, desc: '已审核', key: 'VALID' },
          { value: 4, desc: '已驳回', key: 'REJECT' },
          { value: 5, desc: '已出库', key: 'OUT' },
          { value: 6, desc: '已入库', key: 'IN' }
        ],
        reBillTypeMap: [
          { value: 1, desc: '调拨', key: 'DB' },
          { value: 2, desc: '充装', key: 'CZ' },
          { value: 5, desc: '采购', key: 'CG' },
          { value: 6, desc: '托管', key: 'TG' },
          { value: 101, desc: '销售', key: 'XS' },
          { value: 102, desc: '押/退', key: 'ZL' },
          { value: 103, desc: '欠/还', key: 'QP' },
          { value: 104, desc: '回收/置换', key: 'HS' },
          { value: 105, desc: '退货', key: 'TH' },
          { value: 106, desc: '冲红', key: 'CH' }
        ],
        actionColWidth: 80,
        tableData: {
          total: 0,
          data: []
        },
        treeData: [],
        selectList: [],
        statusMap: []
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ]),
      column: function() {
        return [
          {
            type: 'selection',
            selectable: (row, index) => { return row.transStatus === 1 }
          },
          {
            prop: 'stockTransCode',
            label: '调拨单号',
            width: 150,
            render: (h, { row }) => (
              <el-link underline={false} onClick={() => this.stockCodeHandle(row)}>
                {row.stockTransCode}
              </el-link>
            )
          },
          {
            prop: 'transType',
            label: '调拨类型',
            showOverflowTooltip: true,
            render: (h, scope) => (
              <span>{scope.row.transType && formatColumnMap(this.transTypeMap, 'value', scope.row.transType, 'desc')} </span>
            )
          },
          {
            prop: 'outStoreName',
            label: '仓库(出 → 入)',
            width: 350,
            showOverflowTooltip: true,
            render: (h, { row }) => (
              <span>
                {row.outStoreName}&nbsp;→&nbsp;{row.inStoreName}
              </span>
            )
          },
          {
            prop: 'transStatus',
            label: '状态',
            render: (h, scope) => (
              <span style={scope.row.transStatus === -1 || scope.row.transStatus === 4 ? 'color:red' : ''}>
                {scope.row.transStatus &&
                formatColumnMap(
                  this.transStatusMap,
                  'value',
                  scope.row.transStatus,
                  'desc'
                )}
              </span>
            )
          },
          {
            prop: 'bottleNum',
            label: '调拨数量'
          },
          {
            prop: 'scanOutCount',
            label: '实际出库扫瓶',
            width: 110
          },
          {
            prop: 'scanInCount',
            label: '实际入库扫瓶',
            width: 110
          },
          {
            prop: 'scanErrFlag',
            label: '出库入库数量',
            width: 110,
            render: (h, scope) => (
              <span>{scope.row.scanErrFlag === 1 ? '不一致' : scope.row.scanErrFlag === -1 ? '一致' : '' } </span>
            )
          },
          {
            prop: 'applicant',
            label: '创建人'
          },
          // {
          //   prop: 'apOrgName',
          //   label: '创建机构'
          // },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 160,
            render: (h, { row }) => (
              <span>
                {row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}
              </span>
            )
          },
          {
            prop: 'expectDt',
            label: '期望时间',
            width: 160,
            render: (h, { row }) => (
              <span>
                {row.expectDt && parseTime(row.expectDt, '{y}-{m}-{d}')}
              </span>
            )
          },
          {
            prop: 'remark',
            label: '备注'
          },
          {
            prop: 'isSweep',
            label: '调拨扫码',
            render: (h, scope) => (
              <span>
                {scope.row.isSweep &&
                formatColumnMap(
                  this.isSweepMap,
                  'value',
                  scope.row.isSweep,
                  'desc'
                )}
              </span>
            )
          },
          {
            prop: 'checkUser',
            label: '审核人'
          },
          {
            prop: 'auditDt',
            label: '审核时间',
            width: 160,
            render: (h, { row }) => (
              <span>
                {row.auditDt && parseTime(row.auditDt, '{y}-{m}-{d} {h}:{i}:{s}')}
              </span>
            )
          },
          {
            prop: 'planCode',
            label: '关联计划',
            width: 150,
            render: (h, { row }) => (
              <el-link underline={false} onClick={() => this.openStockPlan(row)}>
                {row.planCode}
              </el-link>
            )
          },
          {
            prop: 'stockOutBillCode',
            label: '关联出库单',
            width: 150,
            render: (h, { row }) => (
              <el-link underline={false} onClick={() => this.openStockOut(row)}>
                {row.stockOutBillCode}
              </el-link>
            )
          },
          {
            prop: 'stockInBillCode',
            label: '关联入库单',
            width: 150,
            render: (h, { row }) => (
              <el-link underline={false} onClick={() => this.openstockIN(row)}>
                {row.stockInBillCode}
              </el-link>
            )
          },
          {
            label: '操作',
            fixed: 'right',
            className: 'action-col',
            width: this.actionColWidth,
            render: (h, { row, $index }) => {
              return (
                <div>
                <el-dropdown>
                    <span class='el-dropdown-link'>
                      更多<i class='el-icon-arrow-down el-icon--right'></i>
                    </span>
                    <el-dropdown-menu slot='dropdown'>
                      <el-dropdown-item>
                        {row.transStatus === 1 && (<el-link
                          v-permission={[70302, 3]}
                          underline={false}
                          size='mini'
                          onClick={() => this.examineHandler(row, $index)}
                        >
                          审核
                        </el-link>)}
                      </el-dropdown-item>
                      <el-dropdown-item>
                        {(row.transStatus === 1 || row.transStatus === 2) && (<el-link
                        v-permission={[70302, 4]}
                        underline={false}
                        type='danger'
                        size='mini'
                        onClick={() => this.delHandler(row, $index)}
                      >作废
                      </el-link>)}
                      </el-dropdown-item>
                      <el-dropdown-item>
                        {(
                          <el-link
                          v-permission={[70302, 5]}
                            underline={false}
                            type='danger'
                            size='mini'
                            onClick={() => this.tryPrint(row, $index)}
                          >打印
                          </el-link>
                        )}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              )
            }
          }
        ]
      }
    },
    watch: {
    },
    async created() {
      await Promise.all([this.getTreeData(), this.initStoreMap(), this.getExportDomain()])
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      async fetchData({ currentPage, pageSize }) {
        const params = {
          ...this.query,
          pageIndex: currentPage,
          pageSize
        }
        // 处理仓库
        if (!this.query.inStoreId) {
          params['inStoreId'] = 0
        }
        if (!this.query.outStoreId) {
          params['outStoreId'] = 0
        }
        // 处理时间
        if (this.date && this.date.length > 1) {
          params[`${this.dateType}`] = parseTime(this.date[0], '{y}-{m}-{d} {h}:{i}:{s}')
          params[`${this.dateType}End`] = parseTime(this.date[1], '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          this.$message.warning('请选择日期范围')
          return
        }
        if (this.qtype && this.txt) {
          params[this.qtype] = this.txt
        }
        if (this.qtype1 && this.txt1) {
          params[this.qtype1] = this.txt1
        }
        const startTime = dayjs(this.date[0])
        const endTime = dayjs(this.date[1])
        const momentDiffNum = endTime.diff(startTime, 'month', true)
        if (momentDiffNum > 12) {
          let message = '调拨创建时间最大支持查询1年'
          if (this.dateType === 'enterDt') {
            message = '调拨审核时间最大支持查询1年'
          }
          this.$message({
            type: 'error',
            message: message
          })
          return
        }
        this.exportParams = params
        const res = await selectStockTransBill(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) {
          this.tableData.total = res.data.total
        }
        this.flexColumnWidth()
      },
      exchange() {
        if (this.query.inStoreId && this.query.outStoreId) {
          const num1 = this.query.inStoreId
          const num2 = this.query.outStoreId
          this.query.inStoreId = num2
          this.query.outStoreId = num1
          const array1 = JSON.parse(JSON.stringify(this.RightStoreMap))
          const array2 = JSON.parse(JSON.stringify(this.leftStoreMap))
          this.RightStoreMap = JSON.parse(JSON.stringify(array2))
          this.leftStoreMap = JSON.parse(JSON.stringify(array1))
        }
      },

      async initStoreMap() {
        selectOrgSNNoAndReType({
          currentPage: 1,
          pageSize: 9999,
          reType: 4
        }).then((res) => {
          this.storeMap = res.data
          this.leftStoreMap = res.data
        })
        selectOrgSNNo({
          orgSNNo: '',
          reType: 4
        }).then(res => {
          const rightStoreMap = res.data.filter(item => {
            return item.reType === 1 || item.reType === 3 || item.reType === 6
          })
          this.rightStoreMap = rightStoreMap
          this.storageStoreMap = rightStoreMap
        })
        // 查询所有车辆
        const query = {
          truckType: 3
        }
        const res1 = await queryTruckNoList(query)
        this.truckMap = res1.data
        // 查询所有司机
        const res2 = await queryDriverList()
        this.driverMap = res2.data
        // 查询所有押运员
        const res3 = await queryEscortList()
        this.escortMap = res3.data
        const [res4, res5, res6, res7] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'StockOutType' }),
          mergeAsyncFunc(queryMap, { enumName: 'StockOutType' }),
          stockTransWin(),
          mergeAsyncFunc(queryMap, { enumName: 'StockTransPlanStatusEnum' })
        ])
        this.stockOutTypeMap = res4.data // 出库类型
        this.stockInTypeMap = res5.data // 入库类型
        this.gdStatusMap = JSON.parse(res6.data.gdStatusMap) // 商品状态枚举
        this.statusMap = res7.data
      },
      // 调拨
      transferEditDialog() {
        this.$refs.allot.open()
      },
      // 审核
      async examineHandler(row) {
        const res = await this.$refs.editInfo.open(row, 'audit')
        if (res) this.$refs.lbTable.fetch()
      },
      // 单号
      stockCodeHandle(row) {
        this.$refs.stockTransDetail.open(row, 'detail')
      },
      // 选择调拨单
      selectTable(val) {
        console.log(val)
        this.selectList = val
      },
      // 批量审核
      async bacth(row) {
        if (!this.selectList.length) {
          this.$message.warning('请选择需要批量审核的调拨单')
          return
        }
        const res = await this.$refs.bacth.open(this.selectList)
        if (res) this.$refs.lbTable.fetch()
        this.selectList = []
      },
      delHandler(row) {
        this.$confirm('确认是否作废当前调拨单?', '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '正在作废',
            duration: 0,
            iconClass: 'el-icon-loading'
          })

          stockTransCancel({ stockTransCode: row.stockTransCode })
            .then(() => {
              this.search()
              this.$notify({
                title: '提示',
                message: '作废成功',
                type: 'success',
                duration: 2000
              })
              this.search()
            })
            .finally(() => {
              loading.close()
            })
        })
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 更新数据
      upDataTable() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async update(row) {
        await this.$refs.add.open(row)
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 计划
      openStockPlan(row) {
        this.$refs.allotPlanDetail.open(row)
      },
      // 出库
      openStockOut(row) {
        this.$refs.outStorageDetail.open({ ...row, stockOutCode: row.stockOutBillCode })
      },
      // 入库
      openstockIN(row) {
        this.$refs.putStorageDetail.open({ ...row, stockInCode: row.stockInBillCode })
      },
      // 获取导出域名
      getExportDomain() {
        mergeAsyncFunc(queryExportDomain)
          .then((res) => {
            this.exportDomain = res.data
          })
      },
      // 导出
      async exportFile() {
        this.$confirm('确定导出数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          var list = JSON.parse(JSON.stringify(this.column))
          list.pop()
          list.shift()
          const value = {}
          await list.forEach(l => {
            value[l.prop] = l.label
            return value
          })
          const params = {
            ...this.exportParams
          }
          const query = {
            paramInfo: params,
            kv: value
          }
          await stockTransExport(query).then((res) => {
            window.open(`${this.exportDomain}/page/export/frame?key=${res.data}`, '_blank')
          })
        })
      },
      tryPrint(row2) {
        const row = JSON.parse(JSON.stringify(row2))
        const cache = JSON.parse(localStorage.tp)
        if (!cache) {
          this.$message.warning('请先设置打印模板')
          return
        }
        const temp = cache['11']
        if (!temp) {
          this.$message.warning('请先设置打印模板')
          return
        }
        let printcmd = {
          cmd: 2,
          title: `正在对调拨单${row.stockTransCode}进行调拨单打印`,
          elements: []
        }
        row.printDt = row.auditDt ? parseTime(row.auditDt, '{y}-{m}-{d} {h}:{i}:{s}') : ''
        row.driver = row.driver || ''
        row.checkUser = row.checkUser || ''
        var items = row.detailList
        var count = 0
        for (var i in items) {
          var item = items[i]
          item.seq = Number(i) + 1
          item.gdName = formatColumnMap(this.gdStatusMap, 'value', items[i].gdStatus, 'desc') || ''
          count += item.gdCount
        }
        row.totalCount = count
        row.transTypeName = formatColumnMap(this.transTypeMap, 'value', row.transType, 'desc') || ''
        row.createTime = row.createTime ? parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') : ''
        row.expectDt = row.expectDt ? parseTime(row.expectDt, '{y}-{m}-{d}') : ''
        row.isSweepName = formatColumnMap(this.isSweepMap, 'value', row.isSweep, 'desc') || ''
        row.auditDt = row.auditDt ? parseTime(row.auditDt, '{y}-{m}-{d} {h}:{i}:{s}') : ''
        console.log('===>>>printcmd:', temp, row)
        printcmd = { ...printcmd, ...temp }
        console.log(printcmd)
        const _jCPrint = this.getwindowJCPrint()
        _jCPrint.process(printcmd, temp, row, items)
        delete printcmd.els
        if (_jCPrint.firePush(JSON.stringify(printcmd))) {
          this.$message.success('打印指令已发送')
        } else {
          this.$message.error('打印未连接')
        }
      },
      getwindowJCPrint() {
        const _jCPrint = window.jCPrint
        if (_jCPrint) {
          return _jCPrint
        }
        return window.parent.jCPrint
      },
      // 自适应表格列宽
      flexColumnWidth() {
        this.$nextTick(() => {
          let max = 0
          const actionColDom = document.getElementsByClassName('action-col')
          for (let i = 0; i < actionColDom.length; i++) {
            if (actionColDom[i].tagName === 'TD') {
              let width = 20
              const linkDom = actionColDom[i].childNodes[0].childNodes[0].childNodes
              linkDom.forEach((it) => {
                width += it.offsetWidth + 10
              })
              if (width > max) max = width
            }
          }
          this.actionColWidth = max > 60 ? max - 10 : 60
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0;
}
.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
.btn-group {
  display: flex;
  justify-content: space-between;
}
</style>
